<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      svg{
        border:2px solid #ccc ;
      }
      .line{
        stroke: #666;
        stroke-width: 2px;
      }
      .text{
        font-size:12px;
        text-anchor: middle;
        dominant-baseline:middle ;
        
      }
    </style>
  </head>
  <body>

    <script src="../d3.js"></script>
    <script>
      const data = [
        {country:'中国',count:123},
        {country:'美国',count:115},
        {country:'英国',count:93},
        {country:'法国',count:88},
        {country:'俄罗斯',count:108}
      ];

      const width = 800 ;
      const height = 600 ;
      const margin = 100 ;
      const countrys = data.map(d=>d.country) ;
      const innerWidth = width - margin * 2 ;
      const innerHeight = height - margin*2 ;

      //y轴计算比例尺
      const yScale = d3.scaleLinear()
        .domain([0,d3.max(data,d=>d.count)])
        .range([innerHeight,0])
        .nice()

      //x轴计算的比例尺  
      const xScale = d3.scaleBand()
        .domain(countrys)
        .range([0,innerWidth])
        .padding(0.3)

      //颜色比例尺
      const colorScale = d3.scaleOrdinal()
        .domain(countrys)
        .range(d3.schemeSet1)



      //准备画布svg
      const svg = d3.select('body').append('svg') 
          .attr('width',width)
          .attr('height',height)


      //绘制y轴 
      let g = svg.append('g').attr('transform',`translate(${margin},${margin})`)    
      g.append('line')
        .attr('x1',0)
        .attr('y1',0)
        .attr('x2',0)
        .attr('y2',innerHeight)
        .attr('class','line')
      let ticks = yScale.ticks(5)
      g.selectAll('g')
        .data(ticks)
        .join('g')
        .call(g=>{
          const h = d=>yScale(d) ;
          g.append('line')
            .attr('x1',0)
            .attr('y1',h)
            .attr('x2',-10)
            .attr('y2',h)
            .attr('class','line')
        })
        .call(g=>{
          g.append('text')
            .attr('x',-30)
            .attr('y',d=>yScale(d))
            .text(d=>d)
            .attr('class','text')
        })


        //绘制x轴
        g = svg.append('g').attr('transform',`translate(${margin},${innerHeight + margin})`)  
        g.append('line')
          .attr('x1',0)
          .attr('y1',0)
          .attr('x2',innerWidth)
          .attr('y2',0)
          .attr('class','line')
        g.selectAll('g')
         .data(countrys)
         .join('g')
         .call(g=>{
            g.append('line')
            .attr('x1',d=>xScale(d)+xScale.step()/2)
            .attr('y1',0)
            .attr('x2',d=>xScale(d)+xScale.step()/2)
            .attr('y2',10)
            .attr('class','line')
         })  
         .call(g=>{
            g.append('text')
              .attr('x',d=>xScale(d)+xScale.step()/2)
              .attr('y',30)
              .text(d=>d)
              .attr('class','text')
              .attr('stroke',d=>colorScale(d))
         })



        //绘制柱子
        g = svg.append('g').attr('transform',`translate(${margin},${ margin})`)  
        g.selectAll('rect')
         .data(data)
         .join('rect')
         .attr('x',d=>xScale(d.country) + (xScale.step() - xScale.bandwidth()) / 2)
         .attr('y',d=>yScale(d.count))
         .attr('width',xScale.bandwidth())
         .attr('height',d=>yScale(0) - yScale(d.count)) //0数据的位置 - 当前数据的位置，即为矩形的高度
         .attr('fill',d=>colorScale(d.country))
         
         
        //绘制标题
        svg.append('text')
          .attr('x',width/2)
          .attr('y',margin/2)
          .text('奥运会奖牌总数')
          .attr('class','text')
          .style('font-size','30')
        
        svg.append('text')
          .attr('x',width/2)
          .attr('y',height - margin/3)
          .text('参赛国家')
          .attr('class','text')
          .style('font-size','16')

          
        svg.append('text')
          .attr('x',margin/3)
          .attr('y',height/2)
          .text('奖牌数')
          .attr('class','text')
          .style('font-size','16')
          .style('writing-mode','tb')
    </script>
  </body>
</html>